<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片案例布局1</title>
		<style>
			/* css  样式思路
			 1.通配选择器：微软雅黑，#f5f5f5  浅灰  外边距至0
			 2.#product_card :   边框 内边距 外边距  阴影【透明度.1】 文字居中
			 3.img  边框倒角  内外边距？【微调】
			 4.h3  颜色 内外边距？【微调】
			 5.p   字体大小  颜色
			 6.p+span:  span 内外边距？ 【微调】  颜色
			 */
			#product_card{
				width: 400px;
				height: 750px;
				padding: 30px 50px 30px 30px;
				background: #f5f5f5;
				
			}
			#product_card2{
				width: 350px;
				height: 700px;
				padding: 20px 30px 20px 30px;
				background: white;
				border-radius: 10px;
				box-shadow: 1px 1px 10px 10px rgba(24, 24, 24, .1) ;
				
			}
			img{
				border-radius: 10px;
			}
			h3{
				font-size: 30px;
				margin-top:20px ;
				text-align: center;
			}
			#money{
				
				font-size: 35px;
				text-align: center;
				color: red;
			}
			#a{margin-top: -25px;
				text-align: center;
				color: #b8b8b8;
				
			}
			span{
				padding: 0px 2px;
				text-align: center;
				color: #b8b8b8;
			}
			#big_card{
				width: 300px;
				height: 100px;
				padding: 40px 10px 10px 10px;
				background: #f5f5f5;
				
				
				
			}
			#card{
				width: 250px;
				height: 50px;
				background: white;
				padding: 10px 10px 10px 10px ;
				border-radius: 10px;
				box-shadow:  1px 1px 5px 5px #cccccc;
			}
			input{
				font-size: 20px;
				margin-top: 7px;
				padding-left: 10px;
				color: #8d8d8d;
				border: 1px solid transparent;
				
			}
			button{
				background: #e4363e;
				color: #cccccc;
				width: 70px;
				height: 40px;
				font-size: 20px;
				position:relative;
				top:-55px;
				left: 180px;
				border-radius: 5px;
				border:0px solid transparent;
			}
		</style>
	</head>
	<body>
	<!--  网页：1.html  结构【原生图分析】  -->
		<div id="product_card"><div id="product_card2">
			<img src="img/9ea1f7d2ee48aa469e74ff9935dd488.jpg" width="350px" height="500px" alt="su7">
			<h3>小米su7</h3>
			<p id="money">￥279999.00</p>
			<p id="a">已有 <span>10万+</span> 人评价</p>
		</div></div>
		<div id="big_card">
			<div id="card"><input placeholder="搜索  京东商品" type="1" /></div><button>搜索</button>
		</div>
		
	</body>
</html>